<template>
	<view class="vi_grid" :class="{'vi_inline':inline}" :style="mainStyle">
		<slot />
	</view>
</template>

<script>
	export default{
		name:"viGrid",
		props:{
			width:{
				type:[String,null],
				default:""
			},
			height:{
				type:[String,null],
				default:""
			},
			//列数，默认1
			xCount:{
				type:[Number,String,null],
				default:null
			},
			//行数，默认自动
			yCount:{
				type:[Number,String,null],
				default:null
			},
			//列宽，可以为数组，区分不同格式
			//100px，数值+单位，每列均设置该宽度值
			//repeat(12, 1fr)，其他字符，直接使用
			//[100px,5px,6px]，按照列数从左至右设为数组对应值，单位可为fr
			xSize:{
				type:[Array,String,null],
				default:null
			},
			//行高
			ySize:{
				type:[Array,String,null],
				default:null
			},
			//列间距
			xSpace:{
				type:[String,null],
				default:""
			},
			//行间距
			ySpace:{
				type:[String,null],
				default:""
			},
			//区域外自动列的列宽，默认跟随xSize(数值+单位时有效)
			xExtra:{
				type:[String,null],
				default:""
			},
			//区域外自动行的行高，默认跟随ySize(数值+单位时有效)
			yExtra:{
				type:[String,null],
				default:""
			},
			//自动填充，最大适应。xWidth为数值+单位时有效
			//可选fill(留白)、fit(占满整行)
			//暂不知道以列优先填充时差别
			xAutoFill:{
				type:[String,null],
				default:""
			},
			yAutoFill:{
				type:[String,null],
				default:""
			},
			//填充顺序
			//x，先横向后纵向（默认）
			//y，先纵向后横向
			//xFull，尽量填满，横向如有空位，且后续项目能填补空位的，拉去填补
			//yFull，尽量填满，纵向如有空位，且后续项目能填补空位的，拉去填补
			direction:{
				type:[String,null],
				default:""
			},
			//单元格内容水平对齐，同flex
			//left(默认)、right、center、full
			xAlign:{
				type:[String,null],
				default:""
			},
			//单元格内容垂直对齐
			//top(默认)、bottom、center、full
			yAlign:{
				type:[String,null],
				default:""
			},
			//内容区域水平对齐，整个grid视为flex，行列视为item
			//left(默认)、right、center、full、around、between、evenly
			xBerth:{
				type:[String,null],
				default:""
			},
			//内容区域垂直对齐
			//top(默认)、bottom、center、full、around、between、evenly
			yBerth:{
				type:[String,null],
				default:""
			},
			inline:{
				type:[Boolean,null],
				default:false
			},
		},
		data(){
			return {
				directionOpt:{
					"x": "row",
					"y": "column",
					"xFull": "row dense",
					"yFull": "column dense"
				},
				alignOpt:{
					"left": "start",
					"right": "end",
					"center": "center",
					"full": "stretch",
					"around": "space-around",
					"between": "space-between",
					"evenly": "space-evenly",
					"top": "start",
					"bottom": "end"
				}
			}
		},
		computed:{
			mainStyle(){
				let res = {},
					width = this.width,
					height = this.height,
					xCount = Number(this.xCount) ||1,
					yCount = Number(this.yCount) ||0,
					xSize = this.xSize,
					ySize = this.ySize,
					xSpace = this.xSpace,
					ySpace = this.ySpace,
					xExtra = this.xExtra,
					yExtra = this.yExtra,
					xAutoFill = ["fill","fit"].includes(this.xAutoFill)? this.xAutoFill :"",
					yAutoFill = ["fill","fit"].includes(this.yAutoFill)? this.yAutoFill :"",
					direction = ["x","y","xFull","yFull"].includes(this.direction)? this.direction :"",
					xAlign = ["left","right","center","full"].includes(this.xAlign)? this.xAlign :"",
					yAlign = ["top","bottom","center","full"].includes(this.yAlign)? this.yAlign :"",
					xBerth = ["left","right","center","full","around","between","evenly"].includes(this.xBerth)? this.xBerth :"",
					yBerth = ["top","bottom","center","full","around","between","evenly"].includes(this.yBerth)? this.yBerth :"";
				
				width? res["width"] = width :"";
				height? res["height"] = height :"";
				//列宽
				if(xSize){
					let size,
						xAuto = xAutoFill?"auto-"+xAutoFill :"";
					if(this.$api.isArray(xSize)){
						size = xSize.join(" ")
					}else if(typeof(xSize)=="string"){
						let xSizeUnit = xSize.match(/[a-z|A-Z|%]+$/),
							xSizeVal = Number(xSize.replace(xSizeUnit, ""));
						if(!isNaN(xSizeVal)){//有效数值与单位
							size = `repeat(${xAuto||xCount},${xSize})`;
							if(!xExtra){
								xExtra = xSize
							}
						}else{//直接写入
							size = xSize
						}
					}
					size? res["grid-template-columns"] = size :""
				}else{//未设置列宽，等比分配
					res["grid-template-columns"] = `repeat(${xCount},1fr)`
				}
				//行高
				if(ySize){
					let size,
						yAuto = yAutoFill?"auto-"+yAutoFill :"";
					if(this.$api.isArray(ySize)){
						size = ySize.join(" ")
					}else if(typeof(ySize)=="string"){
						let ySizeUnit = ySize.match(/[a-z|A-Z|%]+$/),
							ySizeVal = Number(ySize.replace(ySizeUnit, ""));
						if(!isNaN(ySizeVal)){//有效数值与单位
							size = `repeat(${yAuto||yCount},${ySize})`;
							if(!yExtra){
								yExtra = ySize
							}
						}else{//直接写入
							size = ySize
						}
					}
					size? res["grid-template-rows"] = size :""
				}else if(yCount){//未设置行高，等比分配
					res["grid-template-rows"] = `repeat(${yCount},1fr)`
				}
				//列间距
				xSpace? res["grid-column-gap"] = xSpace :"";
				//行间距
				ySpace? res["grid-row-gap"] = ySpace :"";
				//扩展列宽
				xExtra? res["grid-auto-columns"] = xExtra :"";
				//扩展行高
				yExtra? res["grid-auto-rows"] = yExtra :"";
				//填充顺序
				direction? res["grid-auto-flow"] = this.directionOpt[direction] :"";
				//单元格水平对齐
				xAlign? res["justify-items"] = this.alignOpt[xAlign] :"";
				//单元格垂直对齐
				yAlign? res["align-items"] = this.alignOpt[yAlign] :"";
				//内容区水平对齐
				xBerth? res["justify-content"] = this.alignOpt[xBerth] :"";
				//内容区垂直对齐
				yBerth? res["justify-content"] = this.alignOpt[yBerth] :"";
				
				return this.$api.objToStr(res);
			}
		},
	}
</script>

<style lang="scss">
.vi_grid{
	display: grid;
	&.vi_inline{
		display: inline-grid;
	}
}
</style>